<template>
  <card class="layer-con">
      <p slot="title">{{title}}</p>
      <span slot="extra" @click.prevent="remove">
            <Icon type="close-round" color="#495060"></Icon>
        </span>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="联系人" prop="userName">
            <Input v-model="formValidate.userName"> <Icon type="ios-person-outline" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem label="电话" prop="mobile">
            <Input v-model="formValidate.mobile"><Icon type="ios-telephone"  slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem label="省" prop="province">
            <Select v-model="formValidate.province"  @on-change="getCityList">
                <Option v-for="item in provinceList" :value="item.p" :key="item.p">{{ item.p }}</Option>
            </Select>
        </FormItem>  
        <FormItem label="市" prop="city">
            <Select v-model="formValidate.city" @on-change="getDistrictList">
                <Option v-for="item in cityList" :value="item.n" :key="item.n">{{item.n}}</Option>
            </Select>
        </FormItem> 
        <FormItem label="区" prop="district">
            <Select v-model="formValidate.district" >
                <Option v-for="item in districtList" :value="item.s" :key="item.s">{{item.s}} </Option>
            </Select>
        </FormItem> 
        <FormItem label="详细地址" prop="address">
            <Input v-model="formValidate.address"><Icon type="android-globe" slot="prepend"></Icon></Input>
        </FormItem> 
        <FormItem>
                <Button type="ghost" @click="remove">取消</Button>
                <Button type="primary" @click="confirm('formValidate')">保存</Button>    
        </FormItem>           
      </Form>
  </card>
</template>
<style scoped>
    .layer-con {
        width: 500px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -250px;
        margin-top: -258px;
        z-index: 20000;
        text-align: left;
        box-shadow: 0 0 10px 1px;
        font-size: 12px;
    }
    
    .ivu-card:hover {
        box-shadow: 0 0 10px 1px;
    }
</style>
<script>
    // import addAddressComponent from 'components/user/addAddress.js'
    // import editAddressAction from 'components/user/editAddress.js'
    import configService from 'service/configService.js'
    import thirdService from 'service/thirdService.js'
    export default {
        name: 'addressForm',
        props: {
            title: String,
            addressData: Object,
            familyId: Number,
            type: String,
            remove: Function
        },
        data() {
            return {
                provinceList: [],
                cityList: [],
                districtList: [],
                formValidate: {
                    id: this.addressData ? this.addressData.id : '',
                    userName: this.addressData ? this.addressData.userName : '',
                    mobile: this.addressData ? this.addressData.mobile : '',
                    province: this.addressData ? this.addressData.province : '',
                    city: this.addressData ? this.addressData.city : '',
                    district: this.addressData ? this.addressData.district : '',
                    address: this.addressData ? this.addressData.address : '',
                    familyId: this.addressData ? this.addressData.familyId : '',
                    isDefault: this.addressData ? this.addressData.isDefault : '',
                },
                ruleValidate: {
                    userName: [{
                        required: true,
                        message: '请输入正确的中文名，2-10个汉字',
                        trigger: 'blur'
                    }],
                    mobile: [{
                        required: true,
                        message: '请输入有效的手机号',
                        trigger: 'blur'
                    }],
                    province: [{
                        required: true,
                        message: '请选择省份',
                        trigger: 'change'
                    }],
                    city: [{
                        required: true,
                        message: '请选择城市',
                        trigger: 'change'
                    }],
                    district: [{
                        required: true,
                        message: '请选择地区',
                        trigger: 'change'
                    }],
                    address: [{
                        required: true,
                        message: '请填写详细地址，5-60个汉字',
                        trigger: 'blur'
                    }]
                }
            }
        },
        created() {
            this.getAddressList()
        },
        methods: {
            async getAddressList() {
                let cityData = await configService.getCityList()
                this.provinceList = cityData.citylist

                this.getCityList(this.formValidate.province)

            },
            getCityList(query) {
                if (query !== '') {
                    let matchCityData = this.provinceList.find(item => {
                        return item.p == query
                    });
                    this.cityList = matchCityData.c
                    this.getDistrictList(this.formValidate.city)
                } else {
                    this.cityList = [];
                }
            },
            getDistrictList(query) {
                if (query !== '') {
                    let matchData = this.cityList.find(item => {
                        return item.n == query
                    });
                    this.districtList = matchData.a

                } else {
                    this.districtList = [];
                }
            },
            confirm(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.type == 'add') {
                            let data = Object.assign(this.formValidate, {
                                'familyId': this.familyId,
                                'isDefault': 0
                            })
                            let callback = (status) => {
                                if (status == 200) { //httpCode 状态码是200 成功，其他状态码失败
                                    this.remove()
                                    this.$Message.success('添加成功！');
                                    this.$store.dispatch('getStudentAddress', {
                                        'familyId': this.familyId
                                    })
                                } else {
                                    this.$Message.warning('添加失败！');
                                }
                            }
                            thirdService.createStudentAdress({
                                data,
                                callback
                            })


                        } else if (this.type == 'edit') {
                            let data = this.formValidate
                            let callback = (status) => {
                                if (status == 200) { //httpCode 状态码是200 成功，其他状态码失败
                                    this.remove()
                                    this.$Message.success('修改成功！');
                                    this.$store.dispatch('getStudentAddress', {
                                        'familyId': this.formValidate.familyId
                                    })
                                } else {
                                    this.$Message.warning('修改失败！');
                                }
                            }
                            thirdService.updateStudentAdress({
                                data,
                                callback
                            })

                        }

                    }
                })
            }
        }

    }
</script>